<template>
    <div class="header-bar" :style="fixedTop && hasNavbar?'padding-top:var(--van-nav-bar-height)':''">
        <van-nav-bar 
            v-show="hasNavbar" 
            :title="title"
            :fixed="fixedTop"
            left-arrow 
            safe-area-inset-top
            class="nav-bar"
            @click-left="onClickLeft" 
            @click-right="clickRightIcon">
            <template #right >
                <van-image :src="searchIcon" fit="contain" class="search-icon" v-show="hasSearch"/>
            </template>
        </van-nav-bar>
    </div>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useHeaderBarStore } from '@/store/headerBar'
  import searchIcon from '@/assets/images/search.png'

  const route = useRoute()
  const router = useRouter()
  const headerBarStore = useHeaderBarStore()
  const fixedTop = ref(true)
  const title: any = computed(() => route.meta.subTitle)
  const hasSearch = computed(() => route.meta.hasSearch)
  const hasNavbar = computed(() => route.meta.hasNavbar)

  const onClickLeft = () => router.back()
  const clickRightIcon = () => {
    headerBarStore.showPopup = true
    //console.log(headerBarStore.showPopup)
  }
</script>
<style lang="scss">
    .header-bar {
        position: relative;
        z-index: 100;
       .search-icon {
            width: 22px;
            height: 24px;
       }
    }
</style>